﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<BadmintonBuddy.Models.ClubFormViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	This is my Add New Club
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">     
    <script src="../../Scripts/Map.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>    
    <script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
    <script type="text/javascript">
        function addAddressToMap(response) {
            map.clearOverlays();
            var point;
            if (!response || response.Status.code != 200) {
                alert("Sorry, we were unable to geocode that address. Marker is pointed to the nearest current location.");
                //if not able to locate the location set the location to default.                
                if (google.loader.ClientLocation) {
                    point = new GLatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);
                }
            } 
            else {
                place = response.Placemark[0];
                point = new GLatLng(place.Point.coordinates[1],
                           place.Point.coordinates[0]);
            }
            $('.mapoptions').show().dialog('open');
               
                map.setCenter(point, 15);
                map.setUIToDefault();
                marker = new GMarker(point, { draggable: true });
                map.addOverlay(marker);
                mapDiv.checkResize();
                GEvent.addListener(marker, "click", function() {                    
                    marker.openInfoWindowHtml(place.address + '<br>' +
                '<b>Country :</b> ' + place.AddressDetails.Country.CountryNameCode);
                });
                GEvent.addListener(marker, "dragstart", function() {
                    map.closeInfoWindow();
                });

                GEvent.addListener(marker, "dragend", function() {
                    //alert(marker.getPoint().lat());
                    geocoder.getLocations(marker.getPoint(), function(response) {
                        if (response || response.Status.code == 200) {
                            place = response.Placemark[0];
                            marker.openInfoWindowHtml(place.address + "<p><b>This will be used as the new address for the club.</b></p>");                            
                        }
                    });

                });                
            
        }

        function fillAddress() {            
            var addr = place.address;
            addr = addr.split(",");
            addr = addr.reverse(); //reverse the array as we get the last parameter as country, then state and city.
            switch (addr.length) {
                case 0: //do nothing in case of array size zero
                    break;
                case 1:
                    $('#Country').val(addr[0]);
                    break;
                case 2:
                    $('#Country').val(addr[0]);
                    $('#State').val(addr[1]);
                    break;                
                case 3:
                default:
                    $('#Country').val(addr[0]);
                    $('#State').val(addr[1]);
                    $('#City').val(addr[2]);
                    //for address
                    var address = "";
                    $.each(addr, function(index, addr) {
                        if (index > 2) {
                            address = addr + "," +address ;
                        }
                    });
                    $('#Address').val(address);
                    break;                    
            }

        }

        function showHelp() {
            $('.help').dialog({                
                show: 'blind',
                hide: 'drop',
                width: 500,
                height: 200,
                resizable: false,
                title: "Help"                
            });            
        }

        function loadLocation() {            
            var club_details = "";
            if ($('#Address').val().trim().length == 0 && $('#City').val().trim().length == 0 && $('#State').val().trim().length == 0 && $('#Country').val().trim().length == 0) {
                if (google.loader.ClientLocation) {
                    club_details = new GLatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);                         
                }
            }
            else { // TO DO: Filter out the correct info. from Country|City|State|Address and then show on the map.
                
                club_details = $('#Address').val() + ',' + $('#City').val() + ',' + $('#State').val() + ',' + $('#Country').val();
            }
            initialize();
            geocoder.getLocations(club_details, addAddressToMap);
        }

        function checkWebsite() {
            var website = $('#Website').val().trim();            
            if (website.length > 0) {
                if (!(website.substr(0, website.length) == "http://")) {
                    website = "http://" + website;
                }
                window.open(website);
            }
            else {
                alert("Add website address in the text box !!");
            }
        }


        $(document).ready(function() {

            addWatermark();

            $('input:submit, input:button').button();

            $('a #locate').click(function() {
                loadLocation();
            });

            $('#Country').autocomplete({
                source: "GetCountry",
                minLength: 0
            });

            $('#State').autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "GetState",
                        dataType: "json",
                        data: {
                            term: request.term,
                            country: $('#Country').val()
                        },
                        success: function(data) {
                            response(data);
                        }
                    });
                },
                minLength: 2
            });

            $('#City').autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "GetCity",
                        dataType: "json",
                        data: {
                            term: request.term,
                            state: $('#State').val()
                        },
                        success: function(data) {
                            response(data);

                        }
                    });
                },
                minLength: 2
            });

            $('#optional').accordion({
                collapsible: true,
                animated: 'bounceslide',
                active: false
            });

            $('.mapoptions').dialog({
                autoOpen: false,
                show: 'blind',
                hide: 'drop',
                width: 600,
                height: 500,
                resizable: false,
                title: "Preview Club Location",
                buttons: { "Change": function(event, ui) { fillAddress(); $(this).dialog("close"); }, "Close": function() { $(this).dialog("close"); } }
            });

            $('#preview').click(function() {
                loadLocation();
                return false;
            });

            $('input:submit').click(function() {                
                //watermark puts all the fields with some text
                //hence MVC validation would not work,
                //check mandatory fields and then submit if everything is good.
                if ($('#ClubName').css('color') == 'rgb(170, 170, 170)') {
                    $('#ClubName_validationMessage').html("Please enter Club Name").css('color', 'red'); ;
                    $('#ClubName_validationMessage').show();
                    return false;

                }
                else if ($('#Address').css('color') == 'rgb(170, 170, 170)') {
                    $('#Address_validationMessage').html("Please enter Address for the Club").css('color', 'red'); ;
                    $('#Address_validationMessage').show();
                    return false;

                }
                $('input:text input:textarea').each(function(index) {                    
                    if ($(this).css('color') == 'rgb(170, 170, 170)') {
                        $(this).val("");
                    }
                });
                
                $('#ClubName_validationMessage').hide();
                $('#Address_validationMessage').hide();
                return true;
            });
        });      

        function addWatermark() {
            $('#ClubName').Watermark("E.g: Badminton Sports Club");
            $('#Country').Watermark("E.g: United States");
            $('#State').Watermark("E.g: California");
            $('#City').Watermark("E.g: San Francisco");
            $('#Address').Watermark("E.g: 4356, 34th St...");
            $('#Website').Watermark("E.g: www.example.com");
            $('#From_Email').Watermark("E.g: email_address@example.com");
            $('#PhoneNumber').Watermark("E.g: 555-555-5555");
            $('#Email').Watermark("E.g: club_email_address@club.com");
            $('#Fees').Watermark("E.g: $50");
            $('#Timings').Watermark("E.g: Morning 7-9 Weekdays,7AM-10PM Weekends....");
            $('#Description').Watermark("E.g: Add details like type of court, atmosphere, dedicated place for badminton, other facilities etc.");            
            
        }
    </script>
    <h2 class="submithead">Add Club Details</h2>
    <div>
    <div id="clubform">

    <% Html.EnableClientValidation(); %>
    <% using (Html.BeginForm()) {%>
        
            <div class="editor-label">
                <%= Html.LabelFor(model => model.Club.ClubName)%>                
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.Club.ClubName, new { size = 50,@class="padding5"})%>                
                <%= Html.ValidationMessageFor(model => model.Club.ClubName) %>                               
            </div> 
            
            <div class="editor-label">
                <%= Html.Label("City") %>
            </div>
            
            <div class="editor-field">
                <%= Html.DropDownListFor(model => model.Club.City.CityID,Model.Cities) %> 
                                                            
            </div>  
            
            <div class="editor-label">
                <%= Html.Label("State") %>
            </div>
            
            <div class="editor-field">
                <%= Html.DropDownListFor(model => model.Club.City.State.StateID,Model.States) %> 
                
            </div>
            
            <div class="editor-label">
                <%= Html.Label("Country") %>
            </div>
            
            <div class="editor-field">
                <%= Html.DropDownListFor(model => model.Club.City.State.Country.CountryID,Model.Countries) %> 
                
            </div>          
            
            <%--<div class="editor-label">                
                <%= Html.Label("Country") %>
            </div>
            <div class="editor-field"> 
                <%= Html.DropDownListFor(model => model.City.State.Country.CountryID,new SelectList(model.ClubCity.State.Country.CountryName)) %>               
                <%= Html.ValidationMessageFor(model => model.ClubCity.State.Country.CountryName) %>                                               
            </div>            
            
            <div class="editor-label">
                <%= Html.Label("State") %>
            </div>
            
            <div class="editor-field">
                <%= Html.DropDownListFor(model => model.City.State.StateID,new SelectList(Model.City.State.StateName)) %>                               
                <%= Html.ValidationMessageFor(model => model.City.State.StateName) %>                                
            </div>
            
            <div class="editor-label">
                <%= Html.Label("City") %>
            </div>
            
            <div class="editor-field">
                <%= Html.DropDownListFor(model => model.City.CityID,new SelectList(Model.City.CityName)) %> 
                <%= Html.ValidationMessageFor(model => model.City.CityName) %>                                              
            </div>--%>
            
            
            <div class="editor-label">
                <%= Html.LabelFor(model => model.Club.Address) %>
            </div>
            
            
            
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.Club.Address, new { size = 50,@class="padding5"})%>               
                <p class="margint0"><a href="javascript:loadLocation();">Don't know the exact location? click to locate on map</a></p>
            </div>
            
            <div class="editor-label">
                <%= Html.LabelFor(model => model.Club.Latitude)%>                
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.Club.Latitude, new { size = 50, @class = "padding5" })%>                                                              
            </div> 
            
            <div class="editor-label">
                <%= Html.LabelFor(model => model.Club.Longitude)%>                
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.Club.Longitude, new { size = 50, @class = "padding5" })%>                                                              
            </div> 
            
            <div class="editor-label">
                <%= Html.LabelFor(model => model.Club.Website) %>
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.Club.Website, new { size = 50,@class="padding5"}) %>                
                <p class="margint0"><a href="javascript:checkWebsite();">Check if website address is correct.</a></p>
            </div>            
            
            <div class="editor-label">
                <%= Html.Label("Your E-mail address(") %><a href="javascript:showHelp();"> Why?</a><%=Html.Label(")") %>
            </div>
            <div class="editor-field">
                <%= Html.TextBox("From Email","", new { size = 50,@class="padding5"}) %>                
            </div>           
            
            <%=Html.CheckBox("Owner") %>Are you the owner of the club?
            
            <!--All optional would go in this collapsable UI-->
            <div id="optional">            
            <h3><a href="#">Add more details</a></h3>
            <div id="optionalfields">            
            <div class="editor-label">
                <%= Html.LabelFor(model => model.Club.PhoneNumber) %>
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.Club.PhoneNumber, new { size = 50,@class="padding5"}) %>                
            </div>
            <div class="editor-label">
                <%= Html.LabelFor(model => model.Club.Email) %>
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.Club.Email, new { size = 50,@class="padding5"}) %>
                
            </div>
            
            
           <div class="editor-label">
                <%= Html.LabelFor(model => model.Club.Fees) + "(Per Month)"%>
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.Club.Fees, new { size = 50,@class="padding5"}) %>
            </div>
            
            
            <div class="editor-label">
                <%= Html.LabelFor(model => model.Club.Timings) %>
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.Club.Timings, new { size = 50,@class="padding5"}) %>
            </div>
            
            
            <div class="editor-label">
                <%= Html.LabelFor(model => model.Club.Description) %>
            </div>
            <div class="editor-field">
                <%= Html.TextAreaFor(model => model.Club.Description, new { cols = 40,rows = 5}) %>
            </div>
            
            </div>
            </div>
            <!--End of optional collapsable fields-->
            
            <p>
                <input type="button" id="preview" value="Preview it on Map"/>
                <input type="submit" value="Submit" />
                <input type="button" value="Clear" onclick="this.form.reset()" />
                
            </p>
    <% } %>
    </div>
    <div class="mapoptions">
        <p><b>Move marker(red icon) to change the location.Click Submit once done.</b></p>
        <div id="mapDiv" style= "height:350px">        
        </div>
    </div>
    
    <div class="help dispn">
        <p><b>We would contact you in case we need any more clarification about the information. We would not use this information for any spams or service updates.</b></p>                
        </div>
    </div>
   
</asp:Content>

